import axios from "axios"; //导入axios库，用于发送HTTP请求。
import * as echarts from 'echarts';
import { topic } from "../request/instance";
import { useState, useEffect } from "react"; //导入React的useState和useEffect钩子函数。

// import { Pagination } from "antd"; //导入Ant Design的Pagination组件。



export default function Index1() {
    // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    let [data, setData] = useState([]);
    let [xData, setxData] = useState([]);
    let [sData, setsData] = useState([]);
    let [dataA, usedataA] = useState([


    ]);
    let [dataB, usedataB] = useState([])

    let get_iao = async () => {
        await axios.get("http://localhost:3010/as").then((res) => {
            console.log(res.data.data);
            setData(res.data.data);
        });
    };

    useEffect(() => {
        topic().then((res) => {
            console.log(res.data.data);
            let list = res.data.data;
            var xData = []
            list.forEach(i => {
                xData.push(i.ti);
            });
            // console.log(xData);
            setxData(xData);
            var sData = []
            list.forEach(i => {
                sData.push(i.liang);
            });
            // console.log(xData);
            setsData(sData);

            let lista = res.data.dataa
            var dataa = []
            lista.forEach(i => {
                dataa.push(i.zheng)

            })
            let datab = []
            lista.forEach(i => {
                datab.push(i.liang)
            })
            usedataB(datab)
            usedataA(dataa)

        });



        get_iao();

    }, []);

    let [istrue, setistrue] = useState(false);
    let getbiao = () => {
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: istrue == true ? xData : dataA,
            },
            yAxis: {},
            series: [
                {
                    name: '',
                    type: 'bar',
                    data: istrue == true ? sData : dataB,
                }
            ]
        });
    }
    let getbiaos = () => {
        var myChart = echarts.init(document.getElementById('mains'));
        // 绘制图表
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: istrue == true ? xData : dataA
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: istrue == true ? sData : dataB,
                    type: 'line',
                    smooth: true
                }
            ]
        });
    }

    useEffect(() => {
        getbiao();
        getbiaos();
    }, [xData, sData]);
    useEffect(() => {
        getbiao();
        getbiaos();
    }, [istrue]);


    // 表格数据渲染

    return (
        <>
            <div style={{ width: "800px" }}>
                学科
                <select name="" id="">
                    {data.map((i, index) => <option value={i.discipline}>{i.discipline}</option>)}
                </select>
                学段
                <select name="data" id="">
                    {data.map((i, index) => <option value={i.semester}>{i.semester}</option>)}
                </select>
                年级
                <select name="data" id="">
                    {data.map((i, index) => <option value={i.grade}>{i.grade}</option>)}
                </select>
                班级
                <select>
                    {data.map((i, index) => <option value={i.age}>{i.age}</option>)}
                </select>
                <p></p>
                <button onClick={() => { }}>查询</button>
                <button>学生人数</button>
                <button>作业总量</button>
                <button>平均用时</button>
                <button>平均难度</button>
                <button onClick={() => { setistrue(true); console.log(istrue); }}>30日数据统计</button>
                <button onClick={() => { setistrue(false); console.log(istrue); }}>7日数据统计</button>





                <div id="main" style={{ width: '700px', height: '300px' }}></div>

                <div id='mains' style={{ width: '700px', height: '200px' }}> </div>
            </div>
        </>

    )

}